<!DOCTYPE html>
<html>
    <head>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
        <link rel="stylesheet" href="/static.css">
    </head>
    <body>
        <div id="viewContainer">
            <div id="infoGrapher">
                <div id="colorGraph" style="width: 100%;height:100%;"></div>
                <div id="printSpliterCont">
                    <div class="printCarInfo" id="violations">
                        <table>
                            <thead>
                                <tr>
                                    <th>License</th>
                                    <th>Car</th>
                                    <th>Violator</th>
                                </tr>
                            </thead>
                            <tbody id="insertViolations">
                            </tbody>
                        </table>
                    </div>
                    <div class="printCarInfo" id="speeding-cars">
                        <table>
                            <thead>
                                <tr>
                                    <th>License</th>
                                    <th>Manufacture</th>
                                    <th>Model</th>
                                    <th>Location</th>
                                    <th>Speed</th>
                                </tr>
                            </thead>
                            <tbody id="insertSpeedingCar">
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
            <div id="messageContainer">
                <div id="messageHeader">Raw Log</div>
                <div id="messages"></div>
            </div>
        </div>
        <script>
            var colorBarChart = echarts.init(document.getElementById('colorGraph'));
            colorBarChart.setOption(encodeColorsOptions([]))
            const messagesDiv = document.getElementById("messages");

            function encodeColorsOptions(dataArray){
                const sortedData = dataArray.sort((a, b) => (a.color == b.color ? 0 : (a.color < b.color) ? -1 : 1))
                const colorArray = sortedData.map(item=>item.color)
                const valueArray = sortedData.map(item=>({value: item.count, itemStyle: {color: item.color}}))
                console.log(colorArray)
                return {
                    title:{
                        text: "Count-By-Color in Sunnyvale",
                        textStyle:{
                            align: "center"
                        },
                        left: 'center',  // Center the title horizontally
                    },
                    backgroundColor: "#bdbdbd",
                    borderRadius: "10px",
                    xAxis: {
                        type: 'category',
                        data: colorArray
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            data: valueArray,
                            type: 'bar',
                            itemStyle: {
                                borderColor: '#000000',
                                borderWidth: 2,
                            }
                        }
                    ],
                };
            }
            function logNewMessage(parent, message){
                const newMessage = document.createElement("div");
                let htmlData = (new Date()) + " " + message
                newMessage.textContent = htmlData;
                parent.prepend(newMessage);

                if (parent.children.length >= 200) {
                    const childToRemove = parent.children[200];
                    parent.removeChild(childToRemove);
                }
            }
            function logSpeedingCar(carInfo){
                const infoCont = document.getElementById("insertSpeedingCar");
                const newCar = document.createElement("tr");
                newCar.innerHTML = 
                    `<td>${carInfo.license}</td><td>${carInfo.maker}</td>
                    <td>${carInfo.model}</td><td>${carInfo.location}</td>
                    <td>${carInfo.mph}mph</td>`
                infoCont.prepend(newCar)
            }
            function logViolations(carInfo){
                const infoCont = document.getElementById("insertViolations");
                const newCar = document.createElement("tr");
                newCar.innerHTML = 
                    `<td>${carInfo.license}</td><td>${carInfo.owner}</td>
                    <td>${carInfo.violator}</td>`
                infoCont.prepend(newCar)
            }

            const eventSource = new EventSource("/events");
            eventSource.onmessage = (event) => {
                logNewMessage(messagesDiv,event.data)
                
                const jsonArray = JSON.parse(event.data);
                if(jsonArray.type == 'car-colors'){
                    colorBarChart.setOption(encodeColorsOptions(jsonArray.value))
                }
                else if(jsonArray.type == 'speeding'){
                    logSpeedingCar(jsonArray)
                }
                else if(jsonArray.type == 'violations'){
                    logViolations(jsonArray)
                }
            };
        </script>
    </body>
</html>